//首页
//author:王梦阳

var userId = localStorage.getItem("user"); //用户id

//获取顶部导航数据并挂载到页面
let getNav = {
	version: "v1.0",
	author: "wmyang",
	getNavInfo: function() {
		var htmlContentWhole = "";
		htmlContentWhole =
			`
			<div id="advertisement" class="imgbox">
				<div id="slider" class="mui-slider">
					<div class="mui-slider-group mui-slider-loop">
					</div>
					<div class="mui-slider-indicator">
					</div>
				</div>
			</div>
		
			<div id="functionarea"></div>
		
			<div id="huodong">
				<span id="huodong-title">
					<img src="./img/huodong.png" />
					<strong id="baiyibutie">活动商品</strong>
					<span id="dapaizhengpin">|总有一件商品让你心动</span>
					<span id="more">查看更多></span>
				</span>
			    <div id="huodong-content">
				</div>
			</div>
		
			<div id="item-list"></div>`;

		$(".mui-content").html(htmlContentWhole);
		$.ajax({
			url: "http://39.98.158.247:8040/navigate/get/top",
			dataType: "json",
			success: function(data) {
				// console.log(data);
				if (data.status == "success") {
					console.log(data);
					let htmlContent = "";
					let first_nav_name = data.data[0].top_button_name;
					htmlContent +=
						`<a href="#content" class="mui-control-item mui-active" id="${data.data[0].top_button_name}">${data.data[0].top_button_name}</a>`;
					for (var i = 1; i < data.data.length; i++) {
						if (data.data[i].top_button_status == 1) {
							htmlContent +=
								`<a href="#content" class="mui-control-item" id="${data.data[i].top_button_name}">${data.data[i].top_button_name}</a>`;
						}
					}
					$(".mui-scroll").html(htmlContent);
					//点击热门出现首页内容
					document.getElementById(first_nav_name).addEventListener('tap', function() {
						htmlContentWhole =
							`
							<div id="advertisement" class="imgbox">
								<div id="slider" class="mui-slider">
									<div class="mui-slider-group mui-slider-loop">
									</div>
									<div class="mui-slider-indicator">
									</div>
								</div>
							</div>
							
						    <div id="functionarea"></div>
						
							<div id="huodong">
								<span id="huodong-title">
									<img src="./img/活动.png"/>
									<strong id="baiyibutie">活动商品</strong>
									<span id="dapaizhengpin">|总有一件商品让你心动</span>
									<span id="more">查看更多></span>
								</span>
							    <div id="huodong-content">
								</div>
							</div>
						
							<div id="item-list"></div>`;

						$(".mui-content").html(htmlContentWhole);
						getAd.getAdInfo();
						getFunction.getFunctionInfo();
						getPromo.getPromoInfo();
						getItem.getItemInfo();
						getBottomNav.getBottomNavInfo();
					})
					// 为首页顶部导航设置点击事件
					for (var j = 1; j < data.data.length; j++) {
						let nav_id = data.data[j].top_button_name;
						document.getElementById(nav_id).addEventListener('tap', function() {
							//console.log(this.id);
							let category = this.id;
							$.ajax({
								type: "GET",
								url: "http://39.98.158.247:8040/item/category/first",
								data: {
									category: category
								},
								success: function(data) {
									//console.log(data);
									htmlContentWhole =
										`<div id="item-list-nav">
									 </div>`
									$(".mui-content").html(htmlContentWhole);
									let htmlContentItem = ``;
									for (var i = 0; i < data.data.length; i++) {
										console.log(data.data[0].item_img);
										htmlContentItem +=
											`<div class="item"id="${i}" >
									 		<img  class="item-image" src="${data.data[i].item_img}"/>
									 		<div class="item-content">
									 		<span class="item-title">${data.data[i].item_name}</span>
									 		<span class="item-shop">${data.data[i].item_brand}</span>
									 		<span class="item-price">￥${data.data[i].item_price}</span>
									 		<span class="item-sale">已售 ${data.data[i].item_sales} 件</span>
									 		</div>
									 	    </div>`;
									}
									$("#item-list-nav").html(htmlContentItem);
									for (var j = 0; j < data.data.length; j++) {
										document.getElementById(j).addEventListener('tap', function() {
											let itemId = data.data[this.id].item_id;
											//console.log(itemId);
											$.ajax({
												type: "POST",
												dataType: "json",
												async: false,
												contentType: "application/json",
												url: "http://39.98.158.247:8040/browse/insert?userId=" + userId + "&itemId=" + itemId,

												success: function() {
													console.log("insert success");

												},
												error: function() {
													console.log("request error");
												}
											})
											window.open("search-item.html", "_blank");
											localStorage.status = 1;
											localStorage.dataset = JSON.stringify(data);
											localStorage.id = this.id;
										});
									}
								},
								error: function() {
									console.log("request error");
								}
							})
						})
					}
				}
			},
			error: function() {
				console.log("request error");
			},
		})
	}
}


//获取广告banner图，并实现轮播效果
let getAd = {
	version: 'v1.0',
	getAdInfo: function() {
		$.ajax({
			url: "http://39.98.158.247:8040/ad/get",
			dataType: "json",
			success: function(data) {
				// console.log(data);
				let length = data.data.length;
				let htmlContent = "";
				let htmlContent1 = "";
				if (length == 1) {
					$('.mui-slider-group').append('<div class="mui-slider-item"><img class="lunbo-img" src="' + data.data[0].ad_img +
						'" /></div>');
				} else {
					$('.mui-slider-group').append(
						'<div class="mui-slider-item mui-slider-item-duplicate"><img class="lunbo-img" src="' + data.data[
							length - 1].ad_img + '" /></div>');
					$('.mui-slider-indicator').append('<div class="mui-indicator mui-active"></div>');
					for (var i = 0; i < length; i++) {
						$('.mui-slider-group').append('<div class="mui-slider-item"><img class="lunbo-img" src="' + data.data[i]
							.ad_img + '" /></div>');
					}
					$('.mui-slider-group').append(
						'<div class="mui-slider-item mui-slider-item-duplicate"><img class="lunbo-img" src="' + data.data[0].ad_img +
						'" /></div>');
					for (var i = 0; i < length - 1; i++) {
						$('.mui-slider-indicator').append('<div class="mui-indicator"></div>');
					}
				}
				var gallery = mui('.mui-slider');
				gallery.slider({
					interval: 2000 //自动轮播周期，若为0则不自动播放，默认为0；
				});
			},
			error: function() {
				console.log("request error");
			}
		})
	}
}

//获取功能区
let getFunction = {
	version: "v1.0",
	author: "wmyang",
	getFunctionInfo: function() {
		$.ajax({
			url: "http://39.98.158.247:8040/function/get",
			dataType: "json",
			success: function(data) {
				// console.log(data);
				if (data.status == "success") {
					// console.log(data);
					let htmlContent = "";
					for (var i = 0; i < data.data.length; i++) {
						htmlContent +=
					   `<div class="function-con">
						   <img class="function-img" src="${data.data[i].fun_button_icon}"/>
						   <p>${data.data[i].fun_button_name}</p>
						</div>`
					}
					$("#functionarea").html(htmlContent);
				}
			},
			error: function() {
				console.log("request error");
			},
		})
	}
}


//获取首页活动列表
let getPromo = {
	version: "v1.0",
	getPromoInfo: function() {
		$.ajax({
			type: "GET",
			url: "http://39.98.158.247:8040/promo/get",
			success: function(data) {
				//console.log(data);
				let htmlContentP = "";
				let itemId = "";
				let dataset;
				for (var i = 0; i < 3; i++) {
					itemId = data.data[i].item_id;
					htmlContentP +=
						`<div class="huodong-detail" id="${itemId}">
							<div id="huodong-name">${data.data[i].promo_name}</div>
							<img class="detail-img"  src="${data.data[i].item_img}"/>
							<span id="description">${data.data[i].promo_description}</span>
							<span id="detail-price">￥${data.data[i].promo_item_price}</span>
					     </div>`;
					$("#huodong-content").html(htmlContentP);
				}
				for (var j = 0; j < 3; j++) {
					itemId = data.data[j].item_id;
					document.getElementById(itemId).addEventListener('tap', function() {
						$.ajax({
							type: "POST",
							dataType: "json",
							async: false,
							contentType: "application/json",
							url: "http://39.98.158.247:8040/browse/insert?userId=" + userId + "&itemId=" + itemId,
							success: function() {
								console.log("insert success");
							},
							error: function() {
								console.log("request error");
							}
						})
						window.open("search-item.html", "_blank");
						localStorage.status = 0;
						localStorage.id = this.id;
					})
				}
				//点击查看更多进行跳转
				document.getElementById("more").addEventListener('tap', function() {
					window.open("more-promo.html", "_blank");
					localStorage.dataset = JSON.stringify(data);
				})
			},
			error: function() {
				console.log("request error");
			}
		})
	}
}

//获取商品列表信息
let getItem = {
	version: "v1.0",
	author: "wmyang",
	getItemInfo: function() {
		$.ajax({
			url: "http://39.98.158.247:8040/item/get",
			dataType: "json",
			success: function(data) {
				// console.log(data);
				if (data.status == "success") {
					let htmlContent = "";
					for (var i = 0; i < data.data.length; i++) {
						htmlContent +=
							`<div class="item" id="${i}">
		                        <img  class="item-image" src="${data.data[i].item_img}" />
								<div class="item-content">
									<span class="item-title">${data.data[i].item_name}</span>
									<span class="item-shop">${data.data[i].item_brand}</span>
									<span class="item-price">￥${data.data[i].item_price}</span>
									<span class="item-sale">已售 ${data.data[i].item_sales} 件</span>
								</div>
							</div>`
					}
					$("#item-list").html(htmlContent);

					// 实现点击搜索到的商品跳转到商品详情页
					for (var j = 0; j < data.data.length; j++) {
						document.getElementById(j).addEventListener('tap', function() {
							let itemId = data.data[this.id].item_id;
							$.ajax({
								type: "POST",
								dataType: "json",
								async: false,
								contentType: "application/json",
								url: "http://39.98.158.247:8040/browse/insert?userId=" + userId + "&itemId=" + itemId,
								success: function() {
									console.log("insert success");
								},
								error: function() {
									console.log("request error");
								}
							})
							window.open("search-item.html", "_blank");
							localStorage.status = 1;
							localStorage.dataset = JSON.stringify(data);
							localStorage.id = this.id;
						});
					}
				}
			},
			error: function() {
				console.log("request error");
			},
		})
	}
}

//获取底部导航
let getBottomNav = {
	version: 'v1.0',
	getBottomNavInfo: function() {
		$.ajax({
			url: "http://39.98.158.247:8040/navigate/get/bottom",
			dataType: "json",
			success: function(data) {
				//console.log(data);
				let htmlContent = "";

				for (var i = 0; i < data.data.length ; i++) {
					// console.log(getBottomNav.ToPage(data.data[i].bottom_button_id));
					let target = getBottomNav.ToPage(data.data[i].bottom_button_id);
					htmlContent +=
						` <a  id="${data.data[i].bottom_button_id}"  class="mui-tab-item " href="${target}">
				         <span class="mui-icon ${data.data[i].bottom_button_icon}"></span>
				         <span class="mui-tab-label">${data.data[i].bottom_button_name}</span>
			            </a>`;
					
				}
				$(".mui-bar-tab").html(htmlContent);
				document.getElementById(data.data[0].bottom_button_id).className="mui-tab-item mui-active";
			},
			error: function() {
				console.log("request error");
			}
		})
	},
	ToPage: function(id) {
		switch (id) {
			case "tab_home":
				return "index.html";
				break;
			case "tab_fenlei":
				return "Classification.html";
				break;
			case "tab_contact":
				return "Chat.html";
				break;
			case "tab_gerenzhongxin":
				return "personal-center.html";

		}
	},
}


window.onload = function() {
	getNav.getNavInfo();
	getAd.getAdInfo();
	getFunction.getFunctionInfo();
	getPromo.getPromoInfo();
	getItem.getItemInfo();
	getBottomNav.getBottomNavInfo();
	user.GetPage("首页",userId);
}
